<template>
  <div id="broken-line" class="broken-line-echarts"></div>
</template>
<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])

export default {
  name: 'brokenLine',
  data() {
    return {
      myECharts: null
    }
  },
  mounted() {
    this.initECharts()
    window.addEventListener('resize', this.resizeECharts)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeECharts)
  },
  methods: {
    initECharts() {
      if (this.myECharts) {
        this.myECharts.dispose()
      }
      const echartsDom = document.getElementById('broken-line')
      this.myECharts = echarts.init(echartsDom)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '1%',
          bottom: '4%',
          containLabel: true
        },
        legend: {
          data: ['浏览量（PV）']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            fontWeight: 'bold',
            lineHeight: 24
          },
          data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '浏览量（PV）',
            type: 'line',
            lineStyle: {
              color: 'rgba(84, 112, 198, 1)'
            },
            areaStyle: {
              color: 'rgba(84, 112, 198, 0.2)'
            },
            data: [10, 30, 90, 50, 20, 67, 45]
          }
        ]
      }
      option && this.myECharts.setOption(option)
    },
    resizeECharts() {
      if (this.myECharts) {
        this.myECharts.resize()
      }
    }
  }
}
</script>
<style lang="scss">
.broken-line-echarts {
  width: 100%;
  min-height: 368px;
}
</style>
